.swiper {
  width: 600px;
  aspect-ratio: 16/9;
  margin: 0px auto;
}

.swiper img {
  display: block;
  width: 100%;
  aspect-ratio: 16/9;
  object-fit: cover;
}

.swiper-slide {
  position: relative;
}

/* 
  选择器::before
  表示在选择器对应的元素内容的前面创建一个伪元素
  content属性是伪元素的内容
  attr()函数表示获取属性值作为伪元素的内容
  下面的代码是在class为swiper-slide的元素添加一个元素
  data-title属性的值就是伪元素的内容
*/
.swiper-slide::before {
  position: absolute;
  top: 0px;
  left: 0px;
  right: 0px;
  text-align: center;
  z-index: 10;
  content: attr(data-title);
  padding: 0.5rem;
  background-color: rgba(0, 0, 0, 0.5);
  color: #fff;
}


.info {
  color: #f00;
}

.info::before {
  content: '《';
}
.info::after {
  content: '》';
}

